<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-02-06 15:34:13
 * @LastEditors: huangtianyang
 * @LastEditTime: 2023-07-25 16:48:50
 * @FilePath: \cxl-h5\src\components\checkbox\Index.vue
-->
<template>
    <section :class="['checkbox-container', check ? 'check' : '']">
        <input type="checkbox" :checked="check" @change="onChange" />
        <template v-if="check">
            <span class="iconfont icon-chenggong"></span>
        </template>
        <template v-else>
            <span class="iconfont icon-weixuanzhong"></span>
        </template>
    </section>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue'

//接收来自父级的形参
const props = defineProps(['modelValue'])

//注册父级回调
const emits = defineEmits(['update:modelValue', 'onChange'])

//是否勾选
const check = ref(false)

watchEffect(() => {
    check.value = props.modelValue
})

const onChange = (res: any) => {
    emits('update:modelValue', res.target.checked ? true : false)
    emits('onChange', res.target.checked ? true : false)
}
</script>

<style scoped lang="scss">
.iconfont {
    font-size: var(--cxl-size-12);
}
.checkbox-container {
    width: var(--cxl-size-15);
    height: var(--cxl-size-15);
    margin: 0 0.3rem 0 0;
    position: relative;
    input {
        width: 100%;
        height: 100%;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
    }
    span {
        font-size: var(--cxl-size-15);
        display: block;
    }
    &.check {
        span {
            color: var(--cxl-color-primary);
            font-size: var(--cxl-size-15);
        }
    }
}
</style>
